<template>
  <!-- 标题框：包含头像、部门等个人信息 -->
  <div>
    <div
      class="personMsg">
      <img
        class="avatorImage"
        :src="user.avatar"
        alt="">
      <div
        class="personInfo">
        <span>{{ user.username }}-{{ user.orgName }}</span>
        <span>{{ user.position }}</span>
        <!-- <div class="deptImage">{{ userInfo.dept }}</div> -->
      </div>
    </div>
  </div>
</template>
<script>
// import { mapGetters } from 'vuex'
import { WECHAT_INFO } from '@/store/mutation-types'
import Vue from 'vue'
export default {
  name: 'HeaderInfo',
  computed: {
    // ...mapGetters(['userInfo'])
  },
  data () {
    return {
      user: {},
      userInfo: {}
      // 头像
      // user_image: {
      //   avtor: require('@/assets/expense/avtor.png')
      // }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.userInfo = Vue.ls.get(WECHAT_INFO)
      this.user = Object.assign({}, {
        username: this.userInfo.name,
        orgName: this.userInfo.orgName === undefined ? ' ' : this.userInfo.orgName,
        position: this.userInfo.position === undefined ? ' ' : this.userInfo.position,
        avatar: this.userInfo.avatar
      })
    }
  }
}
</script>
<style lang="less" scoped>
.personMsg {
    background-color: #4499fc;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 8px 0 rgba(0,0,0,.1);
    width: 100%;
    padding: 15px 30px 35px;
    height: 110px;
    .avatorImage {
      width: 3rem;
      height: 3rem;
    }
    .deptImage {
      background: url('~@/assets/expense/head_bg_bumen.png') no-repeat 50%;
      background-size: 87%;
      padding: 0px 0px 28px;
    }
    .personInfo {
      display: flex;
      flex-direction: column;
      margin-left: 30px;
      color: #ffffff;
    }
  }
</style>
